<!--
 * @Author: susu 1628469970@qq.com
 * @Date: 2023-04-28 16:37:15
 * @LastEditors: susu 1628469970@qq.com
 * @LastEditTime: 2023-05-26 14:36:17
 * @FilePath: \SUSU_CSS\web\SVG\6.htm
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<link rel="stylesheet" href="../common.css">
<style>
  .box {
    width: 200px;
    display: flex;
    flex-direction: column;
    height: 300px;
  }

  .box-item {
    flex: 1;
    border: 1px solid #fff;
    height: 0;
  }

  .d {
    height: 100%;
    background: red;
    overflow-y: auto;
  }

  .d-h {
    width: 50%;
    height: 320px;
    background: #000;
    writing-mode: vertical-lr;
  }

  .box-x {
    width: 200px;
    display: flex;
    height: 300px;
  }

  .box-item-x {
    flex: 1;
    border: 1px solid #fff;
    width: 0;
  }

  .d-w {
    width: 300px;
    background: #000;
    height: 20px;
  }
</style>

<body>
  <div class="box" style="margin-right: 20px;">
    <div class="box-item">
      <div class="d">
        <div class="d-h">
          苏苏就是小苏苏呀嘻嘻哈哈哈哈哈哈哈苏苏就是小苏苏呀嘻嘻哈哈哈哈哈哈哈
        </div>
      </div>
    </div>
    <div class="box-item">
    </div>
  </div>
  <div class="box-x">
    <div class="box-item-x">
    </div>
    <div class="box-item-x">
      <div class="d">
        <div class="d-w">苏苏就是小苏苏呀嘻嘻哈哈哈哈哈哈哈</div>
      </div>
    </div>
  </div>
</body>
<script>
  let a = 4
  const list = [1, 2, 4,8];
  list.map((item, index) => {
    if (a == item) {
      if (index != 0) {
        list.unshift(list.splice(index, 1)[0])
      }
    }
  })
  console.log(list)
  // this.lightListData.unshift(
  //   this.lightListData.splice(index, 1)[0],
  // );
</script>

</html>